<template>
    <el-card class="!border-none " shadow="never">
        <el-form class="-mb-4" :model="queryFormData" label-width="98px" inline>
            
            
            <div class="grid grid-cols-4 gap-4">
                <div>
                    <el-form-item label="物流单号">
                        <el-input
                            placeholder="请输入物流单号"
                            
                            class="w-64"
                            v-model="queryFormData.logisticNumber"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        
                        </el-input>
                    </el-form-item>
                </div>
                
                <div>
                    <el-form-item label="工单号">
                        <el-input
                            placeholder="请输入工单号"
                            
                            class="w-64"
                            v-model="queryFormData.afterSaleOrderNo"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        
                        </el-input>
                    </el-form-item>
                </div>
                
                
                <div>
                    <el-form-item label="交易订单号">
                        <el-input
                            class="w-64"
                            placeholder="请输入用户交易订单号"
                            
                            v-model="queryFormData.orderNumber"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        </el-input>
                    </el-form-item>
                </div>
                
                
                <div class="flex flex-row-reverse">
                    <el-form-item>
                        <div class="flex-1  flex flex-row-reverse  w-full ">
                            <el-button class="mx-2" type="primary" @click="getPageLists">查询</el-button>
                            <el-button class="mx-2" @click="resetParams">重置</el-button>
                        </div>
                    
                    </el-form-item>
                </div>
            
            </div>
        
        
        </el-form>
    </el-card>
    <el-card class="!border-none mt-5 " shadow="never">
        
        <el-table
            ref="tableRef"
            class="mt-2"
            size="large"
            v-loading="pagerData.loading"
            :data="pagerData.lists"
            row-key="id"
        >
            <el-table-column label="订单号" fixed prop="orderNumber" :show-overflow-tooltip="true" min-width="200"/>
            <el-table-column label="工单号" fixed prop="afterSaleOrderNo" min-width="170"/>
            
            
            <el-table-column label="发运单号" fixed prop="shippingOrderNo"
                             min-width="170"/>
            
            <el-table-column label="工单类型" fixed prop="afterSaleOrderType"
                             min-width="170" :formatter="formatterManager.formatterOrderType"/>
            
            <el-table-column label="状态" prop="status" min-width="120">
                <template #default="{ row }">
                    
                    <el-tag v-for="(item,index) in afterSaleOrderConfig.afterSaleShippingOrderStatus"
                            v-show="row.status === item.code"
                            :key="index"
                            :disable-transitions="true"
                            :type="item.type">
                        {{ item.name }}
                    </el-tag>
                </template>
            </el-table-column>
            
            <el-table-column label="类型" prop="type" min-width="150"
                             :formatter="formatterManager.formatterShippingType"/>
            
            <el-table-column label="寄送物流公司" prop="logisticCompany" min-width="120"/>
            <el-table-column label="寄送物流单号" prop="logisticNumber" min-width="150"/>
            <el-table-column label="发货公司" prop="company" min-width="180"
                             :formatter="formatterManager.formatterWarehouseConfig"/>
            <el-table-column label="发货仓库" prop="warehouse" min-width="130"
                             :formatter="formatterManager.formatterWarehouseConfig"/>
            <el-table-column label="最后操作事件" prop="createTime " min-width="180"
                             :formatter="formatterManager.formatterUpdateTime"/>
            <el-table-column label="操作人" prop="optPerson" min-width="150"/>
            
            <el-table-column label="操作" width="120" fixed="right">
                <template #default="{ row }">
                    <el-button
                        type="primary"
                        link
                        @click="blackmailAfterSaleShipping(row)"
                    >
                        打单
                    </el-button>
                
                
                </template>
            </el-table-column>
        </el-table>
        
        <pagination v-model="pagerData" @change="getPageLists"/>
    
    </el-card>
    
    <Edit ref="popupRef" v-if="showPopupRef" @confirm="getPageLists" @close="showPopupRef=false"/>

</template>

<script lang='ts' setup>
import Edit from "./edit.vue"
import {usePagerManager} from "@/manager/base/PagerManager";
import {getShippingList} from "@/api/afterSale/order/AfterSaleOrderListController";
import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";
import {UnwrapNestedRefs} from "@vue/reactivity";
import {useFormatterManager} from "@/manager/base/FormatterManager";

import BlackmailShipping from "@/api/afterSale/warehouse/request/BlackmailShipping";
import AfterSaleShippingSearchRequest from "@/api/afterSale/warehouse/request/AfterSaleShippingSearchRequest";
import AfterSaleShippingOrderEnum from "@/config/enums/aftersale/AfterSaleShippingOrderEnum";

let afterSaleOrderConfig = useAfterSaleEnumManager();
let formatterManager = useFormatterManager(afterSaleOrderConfig);
const popupRef = shallowRef()
let showPopupRef = ref(false);

let queryFormData: UnwrapNestedRefs<AfterSaleShippingSearchRequest> = reactive(new AfterSaleShippingSearchRequest())
queryFormData.status = AfterSaleShippingOrderEnum.PRINTED


/**
 * 获取分页数据
 */
const {pagerData, getPageLists, resetParams, resetOnePage} = usePagerManager({
    fetchFun: getShippingList,
    params: queryFormData
})


/**
 * 模拟打单数据
 *
 * @author 徐寿春
 * 2023/5/10 10:56
 */
async function blackmailAfterSaleShipping(row: any) {
    
    showPopupRef.value = true
    await nextTick()
    
    
    let requestBlackMail = new BlackmailShipping();
    requestBlackMail.afterSaleOrderId = row.afterSaleOrderId
    requestBlackMail.shippingOrderId = row.shippingOrderId
    requestBlackMail.shippingOrderNo = row.shippingOrderNo
    popupRef.value.open(requestBlackMail)
    
}


/**
 * 获取工单列表
 */
onMounted(() => {
    getPageLists()
    
})

// ------------------------------------------ ** 处理非公共部分 ** ------------------------------------------------------------------------------------


</script>

